使用 javascript 构建 html 代码时转义特殊字符答案

【问题标题】：Escape special characters when building html code using javascript使用 javascript 构建 html 代码时转义特殊字符
【发布时间】：2013-07-17 23:06:47
【问题描述】：

您好，我想使用 javascript 动态构建 html 代码。问题是当我尝试使用 .我想我需要在这里转义特殊字符 = 和 ""。我尝试了类似的方法，但它也给出了非法语法的错误。

for (var i=0; i<array.length; i++)
{
    htmlstr = htmlstr+"<table class"+%3D+%22+"test"+%22+"><tr><th>A</th><td>"+array[i].a+"</td></tr><tr><th>B</th><td>"+array[i].b+"</td></tr><tr><th>C</th><td>"+array[i].c+"</td></tr></table>";
}

有谁知道这样做的正确语法是什么？

提前致谢！

【问题讨论】：

为什么不改用document.createElement & document.createTextNode？当 HTML 字符串非常简单时，它们更容易阅读和处理。还有insertRow和insertCell

标签： javascript html escaping special-characters dynamic-html

【解决方案1】：

htmlstr=htmlstr+'<table class="test"><tr><th>A</th><td>'
               +array[i].a+'</td></tr><tr><th>B</th><td>'
               +array[i].b+'</td></tr><tr><th>C</th><td>'
               +array[i].c+'</td></tr></table>';

例如，如果你想将<input type="button" onClick="alert('Hello, World!');"></input>封装在一个JavaScript字符串中，你不能一次运行，因为代码中同时包含双"和单'引号。你应该这样做：

var htmlCode='<input type="button" onClick="alert('+"'Hello, World!'"+');"></input>';

您可以使用单引号或双引号在 javascript 中定义字符串变量：

var str0='Hello, World!';
var str1="Hello, World!";

他们是绝对平等的。

【讨论】：

【解决方案2】：

这是一个使用我在评论中提到的方法动态构建的示例。

CSS

.tableCSS, th, td {
    border: 1px solid;
}
.tableCSS thead {
    font-weight: bold;
}

Javascript

var array = [],
    codePointAt,
    length,
    i;

array.push({
    a: "A",
    b: "B",
    c: "C"
});

array.push({
    a: "a1",
    b: "b1",
    c: "c1"
});

array.push({
    a: "a2",
    b: "b2",
    c: "c3"
});

array.push({
    a: "a3",
    b: "b3",
    c: "c3"
});

function convertSpaces(text) {
    return text.replace(/ /g, "\u00a0");
}

for (i = 1, length = array.length; i < length; i += 1) {
    var object = array[0],
        table = document.createElement("table"),
        thead = document.createElement("thead"),
        tbody = document.createElement("tbody"),
        tr,
        td,
        pre,
        j;

    table.className = "tableCSS";
    table.appendChild(thead);
    table.appendChild(tbody);

    tr = thead.insertRow();
    for (j in object) {
        if (object.hasOwnProperty(j)) {
            td = document.createElement("th");
            td.appendChild(document.createTextNode(convertSpaces(object[j])));
            tr.appendChild(td);
        }
    }

    tr = tbody.insertRow();
    object = array[i];
    for (j in object) {
        if (object.hasOwnProperty(j)) {
            td = tr.insertCell(),
            td.appendChild(document.createTextNode(convertSpaces(object[j])));
        }
    }

    pre = document.createElement("pre");
    pre.appendChild(table);
    console.log(pre.innerHTML);
    document.body.appendChild(table);
}

开启jsfiddle

还有innerHTML的输出

<table class="tableCSS"><thead><tr><th>A</th><th>B</th><th>C</th></tr></thead><tbody><tr><td>c1</td><td>b1</td><td>a1</td></tr></tbody></table>
<table class="tableCSS"><thead><tr><th>A</th><th>B</th><th>C</th></tr></thead><tbody><tr><td>c3</td><td>b2</td><td>a2</td></tr></tbody></table>
<table class="tableCSS"><thead><tr><th>A</th><th>B</th><th>C</th></tr></thead><tbody><tr><td>c3</td><td>b3</td><td>a3</td></tr></tbody></table>

【讨论】：