Question

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

所以这应该导致“马蒂时钟”。

<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']*/匹配whitespace或'字符之前的所有内容。使用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>

Answer 2

这将是你想要的，不是吗？

＆＃13;

const article = document.querySelector('article');
const name = article.querySelectorAll('.name');

for (var i = 0; i < name.length; i++) {
 var texts = name[i].textContent.split(" ");
 texts[0] = "Marty";
 console.log(texts.join(" "));
}

＆＃13;

<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>

＆＃13;

Answer 3

你这里有错误

 const text = name[i].textContent.split(" ").replace([0], ' ').join("Marty")

as name [i] .textContent.split（“”）返回一个数组，你无法替换数组上的字符串。

你可能想拥有

var text = name[i].textContent.split(" "); //gets the words
text.splice(0, 1, 'Marty'); //removes first and replaces with Marty
text.join(" "); //converts the array in string adding spaces

Answer 4

使用regex替换应该在字符串上：

name[i].textContent.replace(/\w+/, 'Marty')

const article = document.querySelector('article');
const name = article.querySelectorAll('.name');


for (var i = 0; i < name.length; i++) {
 const text = name[i].textContent.replace(/\w+/, '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 5

您可以使用split来执行此操作：

let split = "Brad Clock".split(' ');
split[0].replace("Brad", "Marty").join(' ');

更新：以下是替换文章内容的代码：

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

for (var i = 0; i < name.length; i++) {
     const split = name[i].innerHTML.split(' ');
     split[0] = "Brad";
     name[i].innerHTML = split.join(' ');
}

Answer 6

以下是这样做的方法：获取给定类的每个元素的内容，并用Marty

替换第一个单词

function replaceNames(className,newName){
var elements = document.querySelectorAll("."+className);
for (var i = 0; i < elements.length; i++) {
	var content = elements[i].innerHTML;
	if(content!=""){
		var arr = content.split(" ");
		if(arr.length >0){
			arr[0] = newName;
			content = arr.join(" ");
			elements[i].innerHTML = content;
		}
	}
}
}

replaceNames("name","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>

Javascript，在课堂上替换句子中的第一个单词

6 个答案: