如何在Javascript中选择只知道部分名称的类名

Question

在带有 editor.selection.getContent() 函数的 Javascript 中，我在 wp 编辑器中选择了图像：

<img class="alignnone wp-image-xxx size-large" src="http://....." alt="" />

我需要选择类 wp-image-xxx 并将其替换为包含新 id (xxx) 的类。

使用 classList 我可以获取所有类：

var imgselected = editor.selection.getNode();
var classes = imgselected.classList;

但是我如何在 javascript 中选择 wp-image-xxx 类而不知道 xxx 值以便能够在之后替换它？

Answer 1

这是适用于您的情况的最基本方法：

//Replaces the first class that matches the name given as its "start" of string with a new class name;
function replaceClass(element, searchClassName, replacementClassName) {
  element.classList.remove(findClassName(document.getElementById('foo'), searchClassName));
  element.classList.add(replacementClassName)

  //used to find a className
  function findClassName(element, searchPhrase) {
    var classNameFound = "";
    element.classList.forEach(function(className) {
      if (className.substring(0, searchPhrase.length) === searchPhrase) {
        //Element found
        if (!classNameFound)
          classNameFound = className;
      }
    });
    return classNameFound;
  }
}

只需使用以下内容运行它：

replaceClass(document.getElementById('foo'), 'wp-image', 'newClassName');