Question

我有将整个字符串变为粗体的Javascript代码，但是，我想对代码进行改编，使其仅对'：'之前的字符串部分进行粗体显示。

我当前拥有的代码是：

function changeBrandName() 
{
  var prodList = document.querySelectorAll("h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    var store = prodList[i].indexOf(":");

    for (j = 0; j < store; j++)
    {
      prodList[i].charAt[j].style.fontWeight = 'bold';
    } 
  }
}

以这种方式应用fontWeight目前无法正常工作-我们将不胜感激。

完整字符串为“ Vifa：卵石灰色奥斯陆扬声器”-我希望“ Vifa”以粗体显示。

Answer 1

使用良好的普通旧香草Javascript：

let h1s = document.querySelectorAll('.ProductList-title');

btn.addEventListener('click', function(event) {
  for (const h1 of h1s) { 
    let [brand, text] = h1.textContent.split(':');
    h1.innerHTML = `${brand.bold()}: ${text}`
  }
  this.parentElement.removeChild(this);
})

h1 { font-weight: normal; }

<h1 class="ProductList-title">Porsche: Cayenne</h1>
<h1 class="ProductList-title">BMW: i8</h1>
<button id="btn" type="button">Click to self-destruct</button>

Answer 2

使用纯JavaScript，您必须遍历所查询的元素，获取其innerHTML，转换html，然后再将其重新设置。

要转换HTML，我使用indexOf查找冒号，然后使用slice将字符串分为两部分。然后，我使用模板字符串和<b>标签重建字符串：

const prodList = document.querySelectorAll('.ProductList-title');

Array.from(prodList).forEach(elem => {
  const text = elem.innerHTML;
  const idx = text.indexOf(':');
  if (idx >= 0) {
    elem.innerHTML = `<b>${text.slice(0, idx)}</b>${text.slice(idx)}`;
  }
});

h1 {
  font-weight: normal;
}

<h1 class="ProductList-title">Prod 1: blabla</h1>
<h1 class="ProductList-title">Prod 2: blabla</h1>
<h1 class="ProductList-title">Prod 3: blabla</h1>
<h1 class="ProductList-title">Prod 4 no colon blabla</h1>

Answer 3

split等必须有一个更简单的解决方案，但这是为了清楚起见而采用的一种方法

<h1 class="ProductList-title" style="font-weight: 100;">Vifa: Pebble Grey Oslo Loudspeaker</h1>

<script>
    function changeBrandName() {
        var prodList = document.querySelectorAll("h1.ProductList-title");
        for (var i = 0; i < prodList.length; i++) {
            var text = prodList[i].innerText;
            var index = text.indexOf(':');
            var lower = text.substring(0, index);
            var higher = text.substring(index + 1);
            prodList[i].innerHTML = lower.bold() + ':' + higher;
            // lower.bold() is same as '<b>'+lower+'</b>'
        }
    }
    changeBrandName();
</script>

JavaScript：特定字符前的粗体字符串

3 个答案: