JavaScript实现字符串与HTML格式相互转换

下面是实现JavaScript字符串与HTML格式相互转换的完整攻略。

一、将字符串转为HTML格式

1.1 转义特殊字符

在将字符串转为HTML格式时，需要注意转义一些特殊字符，以保证HTML格式的正确性。常见的特殊字符包括：

• & 替换为 &
• < 替换为 <

• 替换为 >

• " 替换为 "
• ' 替换为 '

代码如下：

function htmlEncode(str) {
  var html = "";
  if (str.length === 0) {
    return "";
  }
  html = str.replace(/&/g, "&");
  html = html.replace(/</g, "&lt;");
  html = html.replace(/>/g, "&gt;");
  html = html.replace(/"/g, "&quot;");
  html = html.replace(/'/g, "&#39;");
  return html;
}

1.2 拼接HTML标签

处理转义字符后，接下来就是将文本拼接成HTML标签的格式。例如，要将一个字符串转为一个带颜色的

标签，可以使用如下代码：

function toHeading(text, color) {
  var html = "<h1 style='color:" + color + "'>" + htmlEncode(text) + "</h1>";
  return html;
}

这里使用了字符串拼接的方式来生成完整的HTML标签。

二、将HTML格式转为字符串

2.1 使用innerHTML属性

将HTML格式转为字符串，最简单的方法就是将HTML代码插入到页面中的一个元素中，然后通过元素的innerHTML属性获取生成的字符串。

例如，要将一个带颜色的

标签转为字符串，可以使用如下代码：

function fromHeading(html) {
  var div = document.createElement("div");
  div.innerHTML = html;
  var text = div.firstChild.innerText;
  return text;
}

这里创建了一个新的

元素，将HTML格式的代码赋值给其innerHTML属性，然后通过元素的firstChild属性获取到该元素的第一个子元素，也就是

标签。最后通过innerText属性获取文本内容，即可得到该

标签内的文本字符串。

2.2 使用正则表达式

使用正则表达式也可以将HTML格式的字符串转为纯文本字符串。例如，要将一个带颜色的

标签转为字符串，可以使用如下代码：

function fromHeading(html) {
  var text = html.replace(/<\/?h1.*?>/ig, "");
  text = text.replace(/&lt;/g, "<");
  text = text.replace(/&gt;/g, ">");
  text = text.replace(/&quot;/g, "\"");
  text = text.replace(/&#39;/g, "'");
  text = text.replace(/&amp;/g, "&");
  return text;
}

这里使用了多个正则表达式，将

标签和特殊字符进行替换，从而得到纯文本字符串。

三、示例说明

3.1 示例一

假设要将一个字符串"Hello World!"转为红色文本的

标签，代码如下：

var text = "Hello World!";
var color = "red";
var html = toHeading(text, color);
console.log(html); //<h1 style='color:red'>Hello World!</h1>

这里调用了toHeading函数生成一个带颜色的

标签，将其赋值给变量html，并打印输出到控制台。

3.2 示例二

假设要从一个HTML格式的字符串中提取出段落内容，代码如下：

var html = "<p>这是一个段落</p>";
var text = fromParagraph(html);
console.log(text); //"这是一个段落"

这里调用了fromParagraph函数将HTML格式的字符串转成纯文本字符串，并将结果赋值给变量text，并打印输出到控制台。

以上就是JavaScript实现字符串与HTML格式相互转换的完整攻略。

javascript

赞 (0)

0 0 打赏 微信扫一扫 支付宝扫一扫

生成海报