首页 文章

用“＆lt;”和“＆gt;”替换变量中的所有字符串“<”和“>”

提问于
浏览 次
12

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

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

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

需要转换成

The &lt;b&gt;Genji&lt;/b&gt; and the &lt;b&gt;Heike&lt;/b&gt; waged a long and bloody war.

我用.replace（）函数试了一下：

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

但这只会取代第一次出现的括号 . 我很确定我需要某种循环;我也尝试过使用jQuery中的 each() 函数（一位朋友推荐我查看了jQuery包），但是我对编码总体上还不熟悉，但我遇到了麻烦 .

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

Additional information

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

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

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

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

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

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

javascript jquery string loops replace

5 回答

  • 1

    正如评论中所提到的，您真正需要的是对字符串进行XML编码 . 如果你绝对想要这样做是Javascript，请看看PHP.js函数htmlentities .

    回复于
  • 7

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

    使用XML时需要考虑的提示： Do never ever ever build XML from strings by concatenation if there is any way to avoid it . 你会以这种方式陷入困境 . 有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
}
    回复于
  • 0

    看这里：

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

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

    str = str.replace(/\</g,"&lt;")   //for <
str = str.replace(/\>/g,"&gt;")   //for >
    回复于
  • 2

    https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace

    您可以使用带有“g”（全局匹配）标志的正则表达式 .

    var entities = {'<': '&lt;', '>': '&gt;'};

'<inputtext><anotherinputext>'.replace(
    /[<>]/g, function (s) {
        return entities[s];
    }
);
    回复于
  • 22

    您还可以使用以下内容包围XML条目：

    <![CDATA[...]]>

    见例子：

    <xml>
  <tag><![CDATA[The <b>Genji</b> and the <b>Heike</b> waged a long and bloody war.]]></tag>
</xml>

    维基百科文章：http://en.wikipedia.org/wiki/CDATA

    回复于

相关问题