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

Question

我目前正在编写一个输入表单，可以输入并格式化文本以供后续用作XML条目。为了使HTML代码可读取为XML，我必须将代码括号替换为相应的符号代码，即用<替换<，>替换>。

格式化文本会作为变量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;");

但这只会替换括号的第一个出现位置。我相信我需要某种循环来实现这一点；我也尝试使用jQuery中的each()函数（一个朋友建议我看看jQuery包），但我对编码还是很新手，我有困难让它正常工作。

您如何编写一个循环来替换变量中描述的代码括号？

额外信息：

当然，您的假设是正确的，这是更大事物的一部分。我是日本研究的研究生，目前正在尝试以更易于访问的方式可视化关于日本历史的信息。为此，我使用了由MIT研究生开发的Simile Timeline API。您可以在我的主页上看到时间轴的工作测试。

Simile Timeline使用基于AJAX和JavaScript的API。如果您不想在自己的服务器上安装AJAX引擎，则可以从MIT实施时间轴API。时间轴的数据通常由一个或多个XML文件或JSON文件提供。在我的情况下，我使用XML文件；您可以在此示例中查看XML结构。

在时间轴中，有所谓的“事件”，您可以单击它们以在信息气泡弹出窗口中显示其他信息。这些信息气泡中的文本源自XML源文件。现在，如果您想要在信息气泡中进行一些HTML格式化，则不能使用代码括号，因为它们将仅显示为纯文本。如果使用符号代码而不是普通括号，则可以正常工作。

时间轴的内容将由绝对不习惯编码标记的人员撰写，即历史学家、艺术史学家、社会学家，其中包括数十岁以上的几个人。我尝试向他们解释如何格式化XML文件以创建时间轴，但他们偶尔会犯错误，并在时间轴因为忘记关闭括号或包含撇号而无法加载时感到沮丧。

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

将代码括号转换为符号代码是我最后需要解决的问题，以便有一个可用的输入表单。

- Michael

---

不需要使用jQuery完成此任务。 - Fender

为了使HTML代码可读取XML，我需要将代码符号替换为相应的符号编码，即用<代替<，用>代替>。但不是通过JavaScript字符串替换操作实现，而是对字符进行XML编码，这是一个更为复杂的操作。请注意，不要改变原有的意思。 - Tomalak

此外，我认为你完全没有必要手动完成这个任务。这些事情通常在API层自动发生，所以请告诉我们你实际上想要做什么。提示：替换字符不是你想要做的事情。;-) - Tomalak

当然，你是正确的，Tomalak。我在我的初始帖子中包含了关于我的项目的额外信息。可惜，我还没有足够的声望来发布超过三个超链接，所以这里是输入表单的链接：输入表单 - Michael

@Michael，我已经根据你的代码发布了一种替代方法。 - Tomalak

Answer 1

看这里：

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

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

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

- Fender

---

这些反斜杠完全是多余的。此外，您是想说 > 而不是 &rt;。 - duri

这里应该是 >，而不是 &rt;。它代表“大于”（与“小于”相对）。那么真的需要转义这些括号吗？ - Lightness Races in Orbit

我不是完全确定，一直都是这样使用的。 - Fender

作为一行代码：str = str.replace(/</g,"&lt;").replace(/>/g,"&gt;"); - Avatar

只有一个问题，如果一行中有 < 或 > 以及 <br>，而我不想替换 <br>，只替换 < 和 >，这里该怎么办。我尝试了 strNotes.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/&/g,'&amp;').replace(/'/g,"&#39;").replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 但这并没有起作用。 - Nagendra Singh

@NagendraSingh 您可以使用以下代码将已转换的 <br> 标签还原：strNotes.replace(/\</g,"&lt;").replace(/\>/g,"&gt;").replace(/&lt;br&gt;/g, "<br>")，但我建议您在最后（即放置 HTML 的位置）之前将每个新行视为 \n 并将其替换为 <br>，因为 \n 在除 HTML 以外的任何地方都表示新行，但 <br> 只能在 HTML 中表示换行。 - Guilherme Rossato

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
}

- Tomalak

---

哇，非常感谢。现在通过连接生成XML已经可以正常工作了，但我也将尝试实施你提供的解决方案！如果能避免以后的麻烦，最好早点儿就把它做好。再次感谢你。 - Michael

@Michael：是的，它适用于您测试过的值。标题中的双引号已经破坏了它。;-) - Tomalak

Answer 3

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

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

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

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

- katspaugh

Answer 4

你也可以用以下方式包围你的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

- Theofanis Pantelides

---

遗憾的是，在上述描述的项目中，CDATA无法使用。 - Michael

Answer 5

我创建了一个简单的JS函数来替换大于号和小于号字符。

以下是一个脏字符串示例：< [e-mail] > 以下是一个清理后的字符串示例：[ [e-mail] ]

function RemoveGLthanChar(notes) {
    var regex = /<[^>](.*?)>/g;
    var strBlocks = notes.match(regex);

    strBlocks.forEach(function (dirtyBlock) {
        let cleanBlock = dirtyBlock.replace("<", "[").replace(">", "]");
        notes = notes.replace(dirtyBlock, cleanBlock);
    });

    return notes;
}

使用以下方式调用

$('#form1').submit(function (e) {
    e.preventDefault();
    var dirtyBlock = $("#comments").val();
    var cleanedBlock = RemoveGLthanChar(dirtyBlock);
    $("#comments").val(cleanedBlock);
    this.submit();
});

- Ravi Ram

Answer 6

如评论中所提到的，你真正需要的是将字符串进行XML编码。如果你一定要在Javascript中执行此操作，请参考PHP.js函数htmlentities。

- Félix Saparelli