JavaScript, как регулярное выражение сопоставить и заменить на хэштегах, но исключить символ хэштега - PullRequest
Новая
       19

JavaScript, как регулярное выражение сопоставить и заменить на хэштегах, но исключить символ хэштега

2 голосов
/ 28 октября 2019

У меня есть следующая функция: 

function formattedTitle(posttitle,hreflink) {
  return `<a href='`+ hreflink +`'>` + posttitle.replace(/(^|\s)(#[-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='`+ hreflink + `'>`) + '</a>';
}

Когда я запускаю 

console.log(formattedTitle('This is #awesome news','google.com'));

Он выводит: 

<a href='google.com'>This is </a><a class="hashtag" href='/search?q=hashtag:"#awesome"'>#awesome</a><a href='google.com'> news</a>


function formattedTitle(posttitle, hreflink) {
  return `<a href='` + hreflink + `'>` + posttitle.replace(/(^|\s)(#[-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='` + hreflink + `'>`) + '</a>';
}


console.log(formattedTitle('This is #awesome news', 'google.com'));

Обратите внимание, как он включает "#" в совпадении $ 2. Как я могу исключить символ хэштега в атрибуте hashtag:, но сохранить его между значением href?

Таким образом, вывод должен выглядеть следующим образом: 

<a href='google.com'>This is </a><a class="hashtag" href='/search?q=hashtag:"awesome"'>#awesome</a><a href='google.com'> news</a>

Мне удалось получитьэто работает, выполнив другую замену всей вещи, чтобы заменить '/search?q=hashtag:"# на '/search?q=hashtag:", но мне интересно, возможно ли это без второй замены?

Ответы [ 3 ]

2 голосов
/ 28 октября 2019

Переместите # за пределы захваченной 2-й группы, чтобы она не была захвачена. При замене в href замените просто на $2 (так что без хэштега). При замене текста внутри на <a> замените его на #$2, чтобы хештег добавлялся в нужное место: 

function formattedTitle(posttitle, hreflink) {
  return `<a href='` + hreflink + `'>`
    + posttitle.replace(/(^|\s)#([-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>#$2</a><a href='` + hreflink + `'>`)
    + '</a>';
}

console.log(formattedTitle('This is #awesome news', 'google.com'));
1 голос
/ 28 октября 2019

Вам просто нужно убрать символ хеша из вашей группы захвата;это не изменит семантику соответствия. Вот так: 

function formattedTitle(posttitle, hreflink) {
  return `<a href='`+ hreflink +`'>` + posttitle.replace(/(^|\s)#([-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='`+ hreflink + `'>`) + '</a>';
}
0 голосов
/ 28 октября 2019

Просто добавьте еще одну группу захвата, чтобы получить совпадение с хэштегом (или любым другим символом, который вы хотите захватить) в $2 и другое совпадение без хештега в $3: (#([-.\w]+)) вместо (#[-.\w]+): 

function formattedTitle(postTitle, href) {
  const parts = postTitle.replace(
    /(^|\s)(#([-.\w]+))/gi,
    `$1</a><a class="hashtag" href="/search?q=hashtag:$3">$2</a><a href="${ href }">`);
  
  return `<a href="${ href }">${ parts }</a>`;
}

document.getElementById('postTitle').innerHTML = formattedTitle('This is #awesome news', 'https://google.com');
h3 {
  font-family: monospace;
  font-size: 24px;
  margin: 8px 0;
}

a {
  padding: 8px 0;
  text-decoration: none;
  display: inline-block;
}

.hashtag {
  padding: 6px 8px;
  border: 3px solid blue;
  border-radius: 3px;
  margin: 0 8px;
}
<h3 id="postTitle"></h3>
...