javascript - 拆分html元素并获取文本

Question

我在下面有两个示例代码sample 2似乎对我来说可以拆分元素。但问题是我的元素有一种样式来为其中的文本着色，正如您在sample 1.

样品 1 的期望输出

A2 获奖通知

或者

A2 租赁合同

样品 1

var str = '<div class="col-md-10"> <a style="color:green">A2 Award Notice   </a> <a style="color:black">or</a> <a style="color:orange">A2 Lease Contract  </a> </div>';

console.log(str.match(/<a>.*?<\/a>/g));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

样品 2

var str = '<div><a>A</a><a>B</a><p>Foobar</p><a>C</a></div>';
console.log(str.match(/<a>.*?<\/a>/g));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

TIA。

标签： javascriptjquery

Answer 1

使用另一个技巧从 html 标记和 for 循环中提取文本，您将得到它：

function extractContent(s) {
    var span = document.createElement('span');
    span.innerHTML = s;
    return span.textContent || span.innerText;
};

var str = '<div class="col-md-10"> <a style="color:green">A2 Award Notice   </a> <a style="color:black">or</a> <a style="color:orange">A2 Lease Contract  </a> </div>';
var array = str.match(/<a.*?<\/a>/g);

var i;
for (i = 0; i < array.length; i++) { 
    array[i] = extractContent(array[i]);
};

console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>