特定の文字列の前後に文字列を挿入する

Question

タグを含む文字列の、特定のタグの前後に文字列(タグを)追加したいです。
例えば

"<p>あいう</p>"

↓

"<p><span>あいう</span></p>"

のような変換がしたいです。

str.replaceを使えばできると思ったのですが、

"<p>あいう</p>"

は

"<p class="some-class">あいう</p>"

のようにクラスを持っているパターンがあり、このクラスがを残したいです。
つまり

'<p class="some-class">あいう</p>'

↓

'<p class="some-class"><span>あいう</span></p>'

このように変換したいです...。

replaceで<p>を<p><span>に変更する命令では、pタグがクラスを持ってる場合に変換ができません...。
どのようにすればいいんでしょうか。

---

コメントありがとうございます。
これは文字列に対して行います。
正規表現が苦手でうまくできない状態です...

const addTag = (str) => {
  var pattern = new RegExp('<p>', 'gim')
  return str.replace(pattern, '<p><span>')
}

例えば上記コードだと

<p>を置き換えることはできるけど、<p class="some-class">を置き換えることはできない それと '<p class="some-class">some text</p>'の場合は '<p class="some-class"><span>some text</span></p>' としたいが、中の class="some-class" の部分が消えてしまう。 などの問題があります。 この辺は変数などをうまく使うんでしょうか。

さらにこのstrは複数のpタグを含みます

<p class="some-class1">あいう</p> <p class="some-class2">えお</p>

このような文字列を

<p class="some-class1"><span>あいう</span></p> <p class="some-class2"><span>えお</span></p>

のように変換したいです

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[miyabi_pudding]

ただ単に要素の中に要素を入れるなら、
appendChildを使ったほうがいいかと思います。
なぜ、replaceメソッドを使ってるんでしょうか？
その理由も含めて、kei344さんのおっしゃる通り自身でやってみたコードも含め、質問の修正をお願いいたします。

[退会済みユーザー]

コメントありがとうございます、追記致しました！

Answer 1

var str=`<p><span>あいう</span></p>
<p class="some-class">かきく</p>
<p class="some-class">さしす</p>`;

var ele=document.createElement('body');
ele.innerHTML=str;
[].forEach.call(ele.querySelectorAll('p'),function(x){
  var span=document.createElement('span');
  span.innerHTML=x.innerHTML;
  x.innerHTML="";
  x.appendChild(span);
});
console.log(ele.innerHTML);

Comments

[退会済みユーザー]

凄すぎます、できました
ありがとうございます

Answer 2

正規表現を極めてみたいとかの理由がない限り、タグの編集などはdom操作でやったほうが簡単です。
使われているjavascriptがブラウザのものなら、

var dummy=document.createElement('div');
dummy.innerHTML="<p>あいう</p>" ;
var pElement=dummy.getElementsByTagName('p')[0]
var text=pElement.innerText
var span=document.createElement('span');
span.innerText=text;
pElement.innerHTML="";
pElement.appendChild(span);


```とやれば、
「pElement.outerHTML」に欲しい文字列がります。
[https://codepen.io/satocha/pen/ROwYEX](https://codepen.io/satocha/pen/ROwYEX)

node.jsなどそのままではdocumentオブジェクトを持っていないjavascriptの場合は

[ここらへん](http://info-i.net/jsdom)
とか、
[ここらへん](https://qiita.com/ledsun/items/0965a60f9bdff04f2fa0)
とか、
windowsなら"htmlfile"オブジェクト
を利用すればいいでしょう。

Comments

[退会済みユーザー]

なるほどです、文字列からDOMオブジェクトを作るのですね
ありがとうございます

Answer 3

<p><span>あいう</span></p> でなく <span><p>あいう</p></span> で良いなら以下でどうでしょうか。

※アンダーバーは空白
<p_⇒<span><p_

<p>⇒<span><p> </p>⇒</p></span>