动态文本操作

Dynamic text manipulation

本文关键字：操作 文本 动态      更新时间：2023-09-26

在这个站点中，有很多标题（使用H2），并且想要一半左边然后用一种颜色，一半右边然后用另一种颜色，用空格分隔，但我无法修改php文件（因为它是CMS）然后，我尝试使用一些Javascript来做到这一点：

var headh2 = document.getElementsByName('head2');
    switch (headh2.innerHTML) {
        case ('first item'):
            headh2.innerHTML = '<span style="color: #022662">first </span> item';
        break;
        case ('second item'):
            headh2.innerHTML = '<span style="color: #022662">second </span> item';
        break;
        default:
            headh2.innerHTML = headh2.innerHTML;
    }
但是，它

在任何情况下都不起作用，我需要指定它，但是，不可能做这样的事情：

    var headh2 = document.getElementsByName('head2');
    var X = [abc]; 
    switch (headh2.innerText) {
        case (X[0]+' '+X[1]):
            headh2.innerHTML = '<span style="color: #022662">'+X[0]+'</span>'+X[1];
        break;
        case (X[0]+' '+X[1]+' '+X[2]):
            headh2.innerHTML = '<span style="color: #022662">'+X[0]+'</span>'+X[1]+' '+X[2];
        break;
        default:
            headh2.innerHTML = X[0];
    }
}

其中 X 是没有空格的字符范围，我尝试使用 replace 方法：

.JS：

    var headh2 = document.getElementsByName('head2').innerHTML;
    var str = headh2; 
    var n=str.replace(" ","</span> <span class='color2'>");
    document.getElementsByName('head2').innerHTML=n;

.PHP：

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><span name="head2" class="color1"><?php the_title(); ?></span></a></h2>

但它不能正常工作，它替换了标题中的所有空格，而不仅仅是我想要的空格。

提前非常感谢。

这是一种使用 DOM 操作的方法。请注意，这略有修改以对所有h2标签执行此操作：实时取景

var nodes = document.getElementsByTagName('h2');
for(var i = 0; i < nodes.length; i++)
{
  var second = nodes[i].firstChild;
  var parts = second.nodeValue.split(" ", 2);
  var first = document.createElement('span');
  first.appendChild(document.createTextNode(parts[0]));
  first.style.color = "#022662";
  nodes[i].insertBefore(first, second);
  if(parts.length > 1)
    second.nodeValue = " " + parts[1];
  else
    second.nodeValue = "";
}
相关文章：