const regex = /(^|[^@\w])@(\w{1,30})\b(?!.*<\/span>)/g;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('(^|[^@\\w])@(\\w{1,30})\\b(?!.*<\\\/span>)', 'g')
const str = `@name
email@website.com
a@b
@thisreallylongstringthatshouldntbematched
<span>@name</span>
<span class="mention">@test</span> @test2
<span></span> @betweentwospans <span></span>
`;
const subst = `$1<span class="mention">@$2</span>`;
// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
console.log('Substitution result: ', result);
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions