fixes a bug where yoast markers break html of content in shopify and classic

packages/js/src/decorator/tinyMCE.js

@@ -1,6 +1,5 @@
-import { markers } from "yoastseo";
+import { markers, languageProcessing } from "yoastseo";
 import { forEach } from "lodash-es";
-import { languageProcessing } from "yoastseo";
 
 var MARK_TAG = "yoastmark";
 
@@ -36,11 +35,29 @@ function markTinyMCE( editor, paper, marks ) {
 	let html = editor.getContent();
 	html = markers.removeMarks( html );
 
+	/*
+	 * Get the information whether we want to mark a specific part of the HTML. If we do, `fieldsToMark` should return an array with that information.
+	 * For example, [ "subehading" ] means that we want to apply the markings in subheadings only, and not the other parts.
+	 * `selectedHTML` is an array of the HTML parts that we want to apply the marking to.
+	 */
 	const { fieldsToMark, selectedHTML } = languageProcessing.getFieldsToMark( marks, html );
-
 	// Generate marked HTML.
 	forEach( marks, function( mark ) {
+		/*
+		 * Classic editor uses double quotes for HTML attribute values. However, Block editor uses single quotes for HTML tag attributes,
+		 * and that's why in `yoastseo`, we use single quotes for the attribute values when we create the marked object. As a result,
+		 * the replacement did not work, as the marks passed by `yoastseo` did not match anything in the original text.
+		 * This step is replacing the single quotes in the marked object output by `yoastseo` with double quotes.
+		 * This way, we make sure that the replacement can find a match between the original text of the marked object and the text in the page.
+		 */
+		if ( ! editor.id === "acf_content" ) {
+			mark._properties.marked = languageProcessing.replaceSingleQuotesInTags( mark._properties.marked );
+			mark._properties.original = languageProcessing.replaceSingleQuotesInTags( mark._properties.original );
+		}
+
+		// Check if we want to mark only specific part of the HTML.
 		if ( fieldsToMark.length > 0 ) {
+			// Apply the marking to the selected HTML parts.
 			selectedHTML.forEach( element => {
 				const markedElement = mark.applyWithReplace( element );
 				html = html.replace( element, markedElement );
@@ -73,7 +90,6 @@ function markTinyMCE( editor, paper, marks ) {
  */
 export function tinyMCEDecorator( editor ) {
 	window.test = editor;
-
 	return markTinyMCE.bind( null, editor );
 }
 

packages/yoastseo/spec/fullTextTests/testTexts/pt/portuguesePaper.js

@@ -127,7 +127,7 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 7.8% of the sentences contain transition words," +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 9.2% of the sentences contain transition words," +
 			" which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {

packages/yoastseo/spec/languageProcessing/helpers/regex/createRegexFromArraySpec.js

@@ -6,46 +6,46 @@ describe( "a test creating a regex from an array with strings", function() {
 	it( "adds start and end boundaries by default", function() {
 		expect( arrayToRegex( [ "a", "b", "c" ] ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))(?![^<>]*>)/gi
 		);
 	} );
 
 	it( "adds start and end boundaries when explicitly asked to not disable them", function() {
 		expect( arrayToRegex( [ "a", "b", "c" ], false ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))(?![^<>]*>)/gi
 		);
 	} );
 
 	it( "does not add start and end boundaries when explicitly asked to disable them", function() {
-		expect( arrayToRegex( [ "a", "b", "c" ], true ) ).toEqual( /(a)|(b)|(c)/gi );
+		expect( arrayToRegex( [ "a", "b", "c" ], true ) ).toEqual( /(a)|(b)|(c)(?![^<>]*>)/gi );
 	} );
 
 	it( "does well with regexifying words containing symbols that break regexes", function() {
 		expect( arrayToRegex( [ "keyword*" ], false ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])keyword*($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])keyword*($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))(?![^<>]*>)/gi
 		);
 	} );
 
 	it( "adds a new word boundary", function() {
 		expect( arrayToRegex( [ "a", "b", "c" ], false, "#" ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])b($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›#<>]))))(?![^<>]*>)/gi
 		);
 	} );
 
 	it( "by default does not transliterate input words", function() {
 		expect( arrayToRegex( [ "ä", "ß", "ç" ], false ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ä($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ß($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ç($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ä($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ß($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])ç($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))(?![^<>]*>)/gi
 		);
 	} );
 
 	it( "transliterates input words on request", function() {
 		expect( arrayToRegex( [ "ä", "ß", "ç" ], false, "", true ) ).toEqual(
 			// eslint-disable-next-line max-len
-			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])s($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))/gi
+			/((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])a($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])s($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))|((^|[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>'‘’‛`])c($|((?=[ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))|((['‘’‛`])([ \u00a0\u2014\u06d4\u061f\u060C\u061B\n\r\t.,()”“〝〞〟‟„"+\-;!¡?¿:/»«‹›<>]))))(?![^<>]*>)/gi
 		);
 	} );
 } );

packages/yoastseo/spec/languageProcessing/helpers/syllables/syllableCountStepSpec.js

@@ -15,7 +15,7 @@ describe( "A test for creating a language syllable regex", function() {
 		expect( languageSyllableRegex.countSyllables( "a" ) ).toBe( 1 );
 		expect( languageSyllableRegex.countSyllables( "b" ) ).toBe( 0 );
 
-		expect( languageSyllableRegex.getRegex() ).toEqual( /(a)/gi );
+		expect( languageSyllableRegex.getRegex() ).toEqual( /(a)(?![^<>]*>)/gi );
 	} );
 
 	it( "creates an language syllable regex with a +1 multiplier", function() {
@@ -26,7 +26,7 @@ describe( "A test for creating a language syllable regex", function() {
 		const languageSyllableRegex = new SyllableCountStep( mockSyllables );
 		expect( languageSyllableRegex.countSyllables( "been seen" ) ).toBe( -4 );
 
-		expect( languageSyllableRegex.getRegex() ).toEqual( /(ee)/gi );
+		expect( languageSyllableRegex.getRegex() ).toEqual( /(ee)(?![^<>]*>)/gi );
 	} );
 
 	it( "will not count syllables without a regex", function() {

packages/yoastseo/src/languageProcessing/helpers/html/replaceQuotes.js

@@ -0,0 +1,14 @@
+/**
+ * Replaces single quotes around HTML attribute values with double quotes.
+ * Double quotes are the standard, but we convert these to single quotes when parsing the HTML in `yoastseo` package.
+ * Here, we change them back to double quotes so by parsing the HTML and then outputting it again.
+ *
+ * @param {string} str The input string.
+ *
+ * @returns {string} The string with single quotes around HTML attributes replaced with double quotes.
+ */
+export default function( str ) {
+	const element = document.createElement( "body" );
+	element.innerHTML = str;
+	return element.innerHTML;
+}

packages/yoastseo/src/languageProcessing/helpers/regex/createRegexFromArray.js

@@ -12,10 +12,11 @@ import sanitizeString from "../sanitize/sanitizeString";
  * @param {boolean} [disableWordBoundary=false] Boolean indicating whether or not to disable word boundaries.
  * @param {string} [extraBoundary=""]           A string that is used as extra boundary for the regex.
  * @param {boolean} [doReplaceDiacritics=false] If set to true, it replaces diacritics. Defaults to false.
+ * @param {boolean} [ignoreWhenInHtmlTag=false] The regex does not recognize a word when it is inside a html tag.
  *
  * @returns {RegExp} regex                              The regex created from the array.
  */
-export default function( array, disableWordBoundary = false, extraBoundary = "", doReplaceDiacritics = false ) {
+export default function( array, disableWordBoundary = false, extraBoundary = "", doReplaceDiacritics = false, ignoreWhenInHtmlTag = true ) {
 	array = map( array, function( string ) {
 		if ( doReplaceDiacritics ) {
 			string = replaceDiacritics( string );
@@ -29,7 +30,11 @@ export default function( array, disableWordBoundary = false, extraBoundary = "",
 		return addWordBoundary( string, true, extraBoundary );
 	} );
 
-	const regexString = "(" + array.join( ")|(" ) + ")";
+	let regexString = "(" + array.join( ")|(" ) + ")";
+
+	if ( ignoreWhenInHtmlTag ) {
+		regexString += "(?![^<>]*>)";
+	}
 
 	return new RegExp( regexString, "ig" );
 }

packages/yoastseo/src/languageProcessing/helpers/word/markWordsInSentences.js

@@ -18,6 +18,7 @@ import { escapeRegExp } from "lodash-es";
 export const collectMarkingsInSentence = function( sentence, topicFoundInSentence, matchWordCustomHelper ) {
 	topicFoundInSentence = topicFoundInSentence.map( word => escapeRegExp( word ) );
 	// If a language has a custom helper to match words, we disable the word boundary when creating the regex.
+	// eslint-disable-next-line max-len
 	const topicRegex = matchWordCustomHelper ? arrayToRegex( topicFoundInSentence, true ) : arrayToRegex( topicFoundInSentence );
 	const markup = sentence.replace( topicRegex, function( x ) {
 		return addMark( x );
@@ -42,7 +43,6 @@ export function markWordsInSentences( wordsToMark, sentences, locale, matchWordC
 
 	sentences.forEach( function( sentence ) {
 		topicFoundInSentence = matchWords( sentence, wordsToMark, locale, matchWordCustomHelper ).matches;
-
 		if ( topicFoundInSentence.length > 0 ) {
 			markings = markings.concat( new Mark( {
 				original: sentence,

packages/yoastseo/src/languageProcessing/index.js

@@ -26,6 +26,7 @@ import { stripFullTags as stripHTMLTags } from "./helpers/sanitize/stripHTMLTags
 import sanitizeString from "./helpers/sanitize/sanitizeString";
 import { unifyAllSpaces } from "./helpers/sanitize/unifyWhitespace";
 import removePunctuation from "./helpers/sanitize/removePunctuation";
+import replaceSingleQuotesInTags from "./helpers/html/replaceQuotes";
 import countMetaDescriptionLength from "./helpers/word/countMetaDescriptionLength";
 import getLanguage from "./helpers/language/getLanguage";
 import getSentences from "./helpers/sentence/getSentences";
@@ -65,4 +66,5 @@ export {
 	getSentences,
 	getFieldsToMark,
 	unifyAllSpaces,
+	replaceSingleQuotesInTags,
 };