Javascript，替换类里面句子中的第一个单词

Question

我想帮助您了解如何用 Marty 替换名称类中的名字。我只想使用 Javascript 而不是 jQuery。

所以这应该会导致“Marty Clock”。

<span class="name">Brad Clock</span>

这就是我现在所拥有的。

const article = document.querySelector('article');
const name = article.querySelectorAll('.name');


for (var i = 0; i < name.length; i++) {
 const text = name[i].textContent.split(" ").replace([0], ' ').join("Marty")

 console.log(text);



}

<article>
   
   <p>Does your mom know about tomorrow night? Good morning, Mom. Oh, <span class="name">Marty</span>, I almost forgot, <span class="name">Jennifer Parker</span> called. He's alright. Hey c'mon, I had to change, you think I'm going back in that zoot suit? The <a href="https://giphy.com/gifs/film-back-to-the-future-anniversary2015-Y1aL1fxTEbhQs" art="Spooky young man">old man</a> really came through it worked. <a href="https://giphy.com/gifs/FrVlu71LVoVXy" alt="I guess you guys aren't ready for that yet">I have to tell you about the future</a>.</p>
   
   <p>He's absolutely right, <span class="name">Marty</span>. the last thing you need is headaches. Well, I guess that's everything. Please note that <span class="name">Einstein's</span> clock is in complete synchronization with my control watch. Good evening, I'm Doctor <span class="name">Emmet Brown</span>, I'm standing here on the parking lot of- What did you sleep in your clothes again last night.</p>
   <p>Precisely. <span class="name">George</span>,  Hey beat it, spook, this don't concern you. <a href="https://giphy.com/gifs/back-to-the-future-behind-scenes-CdAh3Sh0Mvtdu" alt="I'm flying!">Bet your ass it works.</a> Here you go, lady. There's a quarter.</p>
  </article>

Answer 1

正则表达式 /[^\s']*/ 匹配 空格 或 ' 字符之前的所有内容。为了方便起见，使用了 Array.prototype.forEach()。

var names = document.querySelectorAll('.name');

names.forEach((name) => {

  name.innerText = name.innerText.replace(/[^\s]*/, 'Marty')

})

<article>
   
   <p>Does your mom know about tomorrow night? Good morning, Mom. Oh, <span class="name">Marty</span>, I almost forgot, <span class="name">Jennifer Parker</span> called. He's alright. Hey c'mon, I had to change, you think I'm going back in that zoot suit? The <a href="https://giphy.com/gifs/film-back-to-the-future-anniversary2015-Y1aL1fxTEbhQs" art="Spooky young man">old man</a> really came through it worked. <a href="https://giphy.com/gifs/FrVlu71LVoVXy" alt="I guess you guys aren't ready for that yet">I have to tell you about the future</a>.</p>
   
   <p>He's absolutely right, <span class="name">Marty</span>. the last thing you need is headaches. Well, I guess that's everything. Please note that <span class="name">Einstein's</span> clock is in complete synchronization with my control watch. Good evening, I'm Doctor <span class="name">Emmet Brown</span>, I'm standing here on the parking lot of- What did you sleep in your clothes again last night.</p>
   <p>Precisely. <span class="name">George</span>,  Hey beat it, spook, this don't concern you. <a href="https://giphy.com/gifs/back-to-the-future-behind-scenes-CdAh3Sh0Mvtdu" alt="I'm flying!">Bet your ass it works.</a> Here you go, lady. There's a quarter.</p>
  </article>