javascript - 如何使用正则表达式进行一些 Javascript 字符串操作？

Question

我有一个以 table row tag 开头和结尾的字符串<tr>...</tr>。其中有多个<td>s，其形式为：

<td class="someClass">TextIWant TextI Do NOtWant</td><td><img src='green.png'></td>
<td class="someClass">TextIWant TextI Do NOtWant</td><td><img src='blue.png'></td>

我要做的是查看color.png，向td添加一个类，并修剪td内的一些文本。最终输出应该是这样的：

<td class="someClass green">TextIWant</td>
<td class="someClass blue">TextIWant</td>

如何使用正则表达式做到这一点？

Answer 1

您可能需要提供更多关于您需要做什么的详细信息，但最好的做法是使用 DOM 解析器，并且 JavaScript 内置了一个非常好的解析器（不支持 IE8-）。

// Select all odd `td` nodes and iterate over them
Array.prototype.forEach.call(document.querySelectorAll("td:nth-child(odd)"),
function (elem) {
    // Get the immediately following sibling (with the img)
    var imgTd = elem.nextSibling;
    // Get the color from the <img>
    elem.className += ' ' + imgTd.querySelector("img").getAttribute("src")
        .replace('.png', '');
    // Remove the sibling
    imgTd.parentNode.removeChild(imgTd);
    // Update the initial elements text to remove the undesired text
    elem.textContent = elem.textContent.replace("TextI Do NOtWant", "");
});

http://jsfiddle.net/e9vrK/

Answer 2

Id 使用 jquery 执行此操作，例如：

var td;
var img;
var color;
 $('img').each(function(){
   img=$(this);
   td = img.closest('td').prev();
   color = img.attr('src').split('.')[0]
     td.html('the image is '+color+'.png').addClass(color);
 });

在这里演示http://jsfiddle.net/QHkbe/2