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。

Answer 1

您正尝试直接匹配<a>...</a>。只需删除对开始锚标记末尾的检查，即可捕获放置在其上的所有属性（而不是检查<a...</a>）。

示例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>

上述方法不是查找锚标记内部文本的好方法或万无一失。相反，您可能想使用jquery解析给定HTML的实际DOM结构：

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 html = $.parseHTML(str);

function findAnchorText(node) {
  $.each(node, function(index, element) {
    if (element.nodeName === 'A') {
      console.log(element.innerHTML);
    }
    // Use recursion to access all elements on the DOM tree
    findAnchorText(element.children)
  });
}

findAnchorText(html)

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

Answer 2

还有另一个技巧，可以从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>

Answer 3

不要使用正则表达式来解析HTML。 jQuery可以为您解析它：

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)
    .find('a')
    .map((index, element) => $(element).text())
    .get()
);

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

香草JavaScript也可以：

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 parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
console.log(
  [...doc.querySelectorAll('a')]
    .map(element => element.textContent)
);

分割html元素并获取文本

3 个答案: