Merge pull request #228 from crowi/fix-highlight-keywords

Fix keyword highlights on search result page

resource/js/components/Page/PageBody.js

@@ -8,6 +8,24 @@ export default class PageBody extends React.Component {
 
     this.crowiRenderer = window.crowiRenderer; // FIXME
     this.getMarkupHTML = this.getMarkupHTML.bind(this);
+    this.getHighlightBody = this.getHighlightBody.bind(this);
+  }
+
+  getHighlightBody(body, keywords) {
+    let returnBody = body;
+
+    keywords.replace(/"/g, '').split(' ').forEach((keyword) => {
+      if (keyword === '') {
+        return;
+      }
+      const k = keyword
+            .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+            .replace(/(^"|"$)/g, ''); // for phrase (quoted) keyword
+      const keywordExp = new RegExp(`(${k}(?!(.*?")))`, 'ig');
+      returnBody = returnBody.replace(keywordExp, '<em class="highlighted">$&</em>');
+    });
+
+    return returnBody;
   }
 
   getMarkupHTML() {
@@ -16,11 +34,17 @@ export default class PageBody extends React.Component {
       body = this.props.page.revision.body;
     }
 
-    return { __html: this.crowiRenderer.render(body) };
+    body = this.crowiRenderer.render(body);
+
+    if (this.props.highlightKeywords) {
+      body = this.getHighlightBody(body, this.props.highlightKeywords);
+    }
+
+    return { __html: body };
   }
 
   render() {
-    const parsedBody = this.getMarkupHTML();
+    let parsedBody = this.getMarkupHTML();
 
     return (
       <div
@@ -33,6 +57,7 @@ export default class PageBody extends React.Component {
 
 PageBody.propTypes = {
   page: PropTypes.object.isRequired,
+  highlightKeywords: PropTypes.string,
   pageBody: PropTypes.string,
 };
 

resource/js/components/SearchPage/SearchResultList.js

@@ -7,36 +7,21 @@ export default class SearchResultList extends React.Component {
 
   constructor(props) {
     super(props);
-
-    this.getHighlightBody = this.getHighlightBody.bind(this);
-  }
-
-  getHighlightBody(body) {
-    let returnBody = body;
-
-    this.props.searchingKeyword.split(' ').forEach((keyword) => {
-      if (keyword === '') {
-        return;
-      }
-      const k = keyword
-            .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-            .replace(/(^"|"$)/g, ''); // for phrase (quoted) keyword
-      const keywordExp = new RegExp(`(${k}(?!(.*?\]|.*?\\)|.*?"|.*?>)))`, 'ig');
-      returnBody = returnBody.replace(keywordExp, '<em class="highlighted">$&</em>');
-    });
-
-    //console.log(this.props.searchingKeyword, body);
-    return returnBody;
   }
 
   render() {
     const resultList = this.props.pages.map((page) => {
-      const pageBody = this.getHighlightBody(page.revision.body);
+      const pageBody = page.revision.body;
       return (
         <div id={page._id} key={page._id} className="search-result-page">
           <h2><a href={page.path}>{page.path}</a></h2>
           <div className="wiki">
-            <PageBody className="hige" page={page} pageBody={pageBody} />
+            <PageBody
+              className="hige"
+              page={page}
+              pageBody={pageBody}
+              highlightKeywords={this.props.searchingKeyword}
+            />
           </div>
         </div>
       );