Question

我想将CAR BUS重命名为MY CAR，将WATER重命名为BREAKFAST，并删除可口可乐和fanta，现在显示出来。人们告诉我必须将其替换为JS，但我不知道。

<li class="dropdown">
  <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                  CARS BUS<b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="/development/#current-developments">WATER</a></li>
    <li><a href="/development/#future-developments">COCA COLA</a></li>
    <li><a href="/development/#past-developments">FANTA</a></li>
  </ul>
</li>

Answer 1

如果您有权访问基础HTML，则完全不需要使用JavaScript。因此，如果您有权访问，请在HTML中进行更改。

如果您没有访问权限，则必须执行以下步骤：

1）抓取元素以通过DOM查询（document.querySelector和document.querySelectorAll）

2）将其innerHTML更改为所需的文字

根据您显示的HTML，最棘手的部分是DOM查询。主要是因为没有太多可用来标识正确元素的元素（通过id或class）。要找出您是否使用了正确的元素，还必须比较它们的内容。

这应该有效：

function queryAll(s, r) {
  return Array.prototype.slice.call((r || document).querySelectorAll(s));
}

function isTarget(needle, element) {
  var regex = new RegExp(needle);
  return regex.test(element.innerHTML);
}

function changeText (needle, replacement, element) {
  element.innerHTML = element.innerHTML.replace(needle, replacement);
}


var dropdowns = queryAll('a[data-toggle="dropdown"]');
dropdowns.forEach(function (anchor) {
  if (isTarget('CARS BUS', anchor)) {
    var subAnchors = queryAll('a', anchor.nextElementSibling);
    changeText('CARS BUS', 'MY CAR', anchor);
    subAnchors.forEach(function (sub) {
      if (isTarget('WATER', sub)) {
        changeText('WATER', 'BREAKFAST', sub);
      } else {
        sub.parentNode.style.display = 'none';
      }
    });
  }
});

<li class="dropdown">
  <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                  CARS BUS<b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="/development/#current-developments">WATER</a></li>
    <li><a href="/development/#future-developments">COCA COLA</a></li>
    <li><a href="/development/#past-developments">FANTA</a></li>
  </ul>
</li>

Answer 2

// Plain JS
// `document.querySelector` will get the first element that matches
// inside selector `>` means that you want to get the direct child of --- in this case `.dropdown`
var $carbus = document.querySelector( 'li.dropdown > a' ), // element
    $dropdownMenu = document.querySelector( '.dropdown-menu' ), // dropdown-menu
    $firstLi = $dropdownMenu.querySelector( 'li > a' ), // element with water text
    $notFirstLi = $dropdownMenu.querySelectorAll( 'li:not(:first-of-type)' ); // last two `li` items

replaceWord( $carbus, 'cars bus', 'my car' ); // replacing `cars bus` with `my car`
replaceWord( $firstLi, 'water', 'breakfast'  ); // replacing `water` with `breakfast`

// removing last two items
$notFirstLi.forEach(function (item) {
    item.remove();
});

/**
 * @param {Element} el - target element 
 * @param {String} oldWord - Old word you want to change
 * @param {String} newWord - New word you want to show
 */
function replaceWord(el, oldWord, newWord) {
    var re = new RegExp( oldWord.toUpperCase(), 'i' ),
        newTxt = el.innerText.replace(re, newWord.toUpperCase());
    el.innerText = newTxt;
}

<li class="dropdown">
    <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">CARS BUS<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="/development/#current-developments">WATER</a></li>
        <li><a href="/development/#future-developments">COCA COLA</a></li>
        <li><a href="/development/#past-developments">FANTA</a></li>
    </ul>
</li>

我如何用JavaScript替换这些单词？

2 个答案: