用"&lt;"替换变量中的所有字符串"<"和">" 和"&gt;"

Question

我目前正在尝试编写一个输入表单,您可以在其中键入和格式化文本以供以后用作XML条目.为了使HTML代码具有XML可读性,我必须用相应的符号代码替换代码括号,即<with <和>with >.

格式化的文本作为带有变量inputtext的 HTML代码传输,因此我们有例如文本

The <b>Genji</b> and the <b>Heike</b> waged a long and bloody war.

需要转换成

The <b>Genji</b> and the <b>Heike</b> waged a long and bloody war.

我用.replace()函数试了一下:

inputxml = inputxml.replace("<", "&lt;");       
inputxml = inputxml.replace(">", "&gt;");

但这只会取代第一次出现的括号.我很确定我需要某种循环; 我也尝试过使用each()jQuery中的函数(一位朋友推荐我查看了jQuery包),但我仍然是编码的新手,我也很难解决这个问题.

如何编写一个循环来代替变量中的代码括号,如上所述？

附加信息

当然,你应该假设这是更大的一部分.我是日本研究的研究生,目前,我正试图以更容易理解的方式可视化有关日本历史的信息.为此,我使用麻省理工学院研究生开发的Simile Timeline API.您可以在我的主页上看到时间轴的工作测试.

Simile Timeline使用基于AJAX和Javascript的API.如果您不想在自己的服务器上安装AJAX引擎,可以从MIT实现时间轴API.时间轴的数据通常由一个或多个XML文件或JSON文件提供.在我的例子中,我使用XML文件; 您可以查看此示例中的XML结构.

在时间轴内,您可以点击所谓的"事件",以便在信息气泡弹出窗口中显示其他信息.这些信息气泡中的文本源自XML源文件.现在,如果要在信息气泡中进行一些HTML格式化,则不能使用代码括号,因为它们只会显示为纯文本.但是,如果使用符号代码而不是简单括号,它就可以工作.

时间表的内容绝对是由人写的,完全不习惯于编纂标记,即历史学家,艺术史学家,社会学家,其中有几个50岁以上的人.我试图向他们解释如果他们想要创建一个时间轴,他们如何格式化XML文件,但是当时间线没有加载因为他们忘记关闭括号或包含撇号时,他们偶尔会滑倒并感到沮丧.

为了使它更容易,我尝试制作一个易于使用的输入表单,您可以输入所有信息并格式化文本WYSIWYG样式,然后将其转换为XML代码,您只需将其复制并粘贴到XML源文件.虽然我仍然在主文本字段中转换文本标记,但大部分都有效.

将代码括号转换为符号代码是我需要工作以获得有效输入表单的最后一件事.

Answer 1

看这里:

http://www.bradino.com/javascript/string-replace/

只需使用此正则表达式替换所有:

str = str.replace(/\</g,"&lt;")   //for <
str = str.replace(/\>/g,"&gt;")   //for >

Answer 2

要在XML中存储任意字符串,请使用浏览器的本机XML功能.通过这种方式,它将变得更加简单,而且您将永远不必再考虑边缘情况(例如,包含引号或尖括号的属性值).

在使用XML时要考虑的提示:如果有任何方法可以避免,则永远不要通过串联从字符串构建XML.你会以这种方式陷入困境.有API来处理XML,使用它们.

从你的代码开始,我建议如下:

$(function() {

  $("#addbutton").click(function() {
    var eventXml = XmlCreate("<event/>");
    var $event   = $(eventXml);

    $event.attr("title", $("#titlefield").val());
    $event.attr("start", [$("#bmonth").val(), $("#bday").val(), $("#byear").val()].join(" "));

    if (parseInt($("#eyear").val()) > 0) {
      $event.attr("end", [$("#emonth").val(), $("#eday").val(), $("#eyear").val()].join(" "));
      $event.attr("isDuration", "true");
    } else {
      $event.attr("isDuration", "false");
    }

    $event.text( tinyMCE.activeEditor.getContent() );

    $("#outputtext").val( XmlSerialize(eventXml) );
  });

});

// helper function to create an XML DOM Document
function XmlCreate(xmlString) {
  var x;
  if (typeof DOMParser === "function") {
    var p = new DOMParser();
    x = p.parseFromString(xmlString,"text/xml");
  } else {
    x = new ActiveXObject("Microsoft.XMLDOM");
    x.async = false;
    x.loadXML(xmlString);
  }
  return x.documentElement;
}

// helper function to turn an XML DOM Document into a string
function XmlSerialize(xml) {
  var s;
  if (typeof XMLSerializer === "function") {
    var x = new XMLSerializer();
    s = x.serializeToString(xml);
  } else {
    s = xml.xml;
  }
  return s
}