将所有字符串“<”替换为和“>”在带有“<”的变量中和“>>”

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 包），但总的来说，我对编码仍然很陌生，并且很难让它工作。

您将如何编写一个循环来替换如上所述的变量内的代码括号？

其他信息

当然，您的假设是正确的，这是更大的事情的一部分。我是一名日本研究研究生，目前，我正在尝试以更容易理解的方式可视化有关日本历史的信息。为此，我使用了麻省理工学院研究生开发的 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,"<")   //for <
str = str.replace(/\>/g,">")   //for >

Answer 2

要在 XML 中存储任意字符串，请使用浏览器的本机 XML 功能。这样会简单很多，而且您将永远不必再考虑边缘情况（例如包含引号或尖括号的属性值）。

使用 XML 时要考虑的提示：如果有任何方法可以避免的话，永远不要通过串联从字符串构建 XML。这样你将会给自己带来麻烦。有处理 XML 的 API，请使用它们。

根据您的代码，我建议如下：

$(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
}

Answer 3

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

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

var entities = {'<': '<', '>': '>'};

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

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

Answer 5

正如注释中提到的，您真正需要的是对字符串进行 XML 编码。如果您绝对想在 Javascript 中执行此操作，请查看 PHP.js 函数 htmlentities。

Answer 6

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

这是一个脏字符串示例： < [电子邮件受保护] >

以下是已清理字符串的示例：[ [email protected] ]

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();
});