jQuery - 使用符号作为输入来更改元素的 HTML 时的奇怪行为答案

【问题标题】：jQuery - Strange Behavior When Using Symbol As Input To Change Element's HTMLjQuery - 使用符号作为输入来更改元素的 HTML 时的奇怪行为
【发布时间】：2015-12-16 08:33:26
【问题描述】：

我正在使用 textarea 为元素创建实时内容编辑器，但如果输入的值是 > 或 < 之类的符号或混合这些符号和文本，则其输出与预期不同只是文本，那么它不会替换而不是加倍。

这里是Fiddle

这里是jquery代码：

$("#changer").on("change keyup paste", function () {
        // get current element
        var thehtml = $("#tochange").html();
        var thetext = $("#tochange").contents().filter(function () {
            return this.nodeType === 3;
        }).text().trim();
        var thechange = $(this).val();

        // if has element, then keep it, add text and put back          
        var thepurehtml = thehtml.replace(thetext, "");
        var theoutput = thechange;
        if ($.trim(thepurehtml) != '') {
            var theoutput = thechange + thepurehtml;
        }
        $("#tochange").html("").html(theoutput);
        return;
    });

是什么原因造成的，如何解决？

PS：我需要具备var theoutput = thechange + thepurehtml;这一行的功能，因为有时编辑的元素有html元素，而不仅仅是空白或文本节点。

【问题讨论】：

请检查这个。如果您的座右铭是通过文本区域编辑 html。希望fddle能帮到你

标签： javascript jquery html onchange symbols

【解决方案1】：

但是我要删除这个答案，因为我没有足够的声誉来发表评论，所以我将作为答案发布。

那么@SoursopTree，你真正想要实现什么？

我发现当您输入 < 或 &gt; 时，$.trim(thepurehtml) 行返回空字符串 (null) 和 null!=''，所以下一条语句 var theoutput = thechange + thepurehtml; 这里是 thechange=&gt; 和thepurehtml=&gt;。所以你得到两个符号而不是一个。

你说you need to have the functionality of this line var theoutput = thechange + thepurehtml;

【讨论】：